<template>
  <div 
    class="child-component" 
    :class="themeClass"
  >
    <h4>深层子组件（注入数据）</h4>
    <p>当前主题：{{ theme.theme.value }}</p>
    <button @click="theme.toggleTheme">切换主题</button>
  </div>
</template>

<script setup>
import { inject, computed } from 'vue'

// 注入主题数据
const theme = inject('theme', {
  theme: { value: 'light' },
  toggleTheme: () => {}
})

// 根据主题计算样式类
const themeClass = computed(() => {
  return theme.theme.value === 'light' ? 'light-theme' : 'dark-theme'
})
</script>

<style scoped>
.child-component {
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

.light-theme {
  background-color: #ffffff;
  color: #333;
}

.dark-theme {
  background-color: #333;
  color: #ffffff;
}
</style>
